<template>
	<view class="login-page">
		<view class="container">
			<!-- Logo，与闪屏页一致 -->
			<image class="logo" src="@/static/images/Logo.png" />
			<!-- 爱创客文字 -->
			<text class="app-name">「学迹一点通——打卡不匆匆」</text>
		</view>

		<!-- 微信登录按钮和账号绑定按钮的容器 -->
		<view class="button-container">
			<!-- 微信登录按钮 -->
			<button class="wechat-login-btn" :class="{ 'wechat-login-btn-active': isPressed }"
				@touchstart="handleTouchStart" @touchend="handleTouchEnd" @click="login"
				:disabled="isNotReady || cantUse || isLoading">
				{{isLoading ? '加载中' :cantUse ? '因运营商问题无法使用':'一键登录'}}
			</button>

			<button v-if="cantUse" class="wechat-newLogin-btn" :class="{ 'wechat-newLogin-btn-active': isNewPressed }"
				@touchstart="handleNewTouchStart" @touchend="handleNewTouchEnd" @click="newLogin">
				其他方式登录
			</button>
			<!-- <button @click="test">测试定位</button> -->
		</view>
	</view>
</template>

<script>
	import {
		getOne,
		login
	} from "../../utils/back.js"
	export default {
		data() {
			return {
				isPressed: false, // 用于控制按钮按下状态
				isNewPressed: false, // 用于控制按钮按下状态
				cantUse: false,
				isNotReady: true,
				isLoading: false,
				data: {
					phone: '',
				}
			};
		},
		async onLoad() {
			// uni.removeStorageSync("phoneNum")
			let that = this
			let phoneNum = uni.getStorageSync("phoneNum")
			console.log(phoneNum);
			if (phoneNum != '') {
				this.data.phone = phoneNum //phoneNum
				let user = await getOne(this.data)
				user = user.data
				console.log(user);
				//调取后端看看有没有这个电话号码
				if (user != null) {
					uni.setStorageSync("id", user.sid)
					uni.setStorageSync("phoneNum", phoneNum)
					uni.setStorageSync("name",user.name)
					uni.setStorageSync("sex",user.sex)
					uni.setStorageSync("dept",user.dept)
					uni.setStorageSync("dorid",user.dorid)
					uni.setStorageSync("phoneNum",phoneNum)
					uni.setStorageSync("email",user.email)
					uni.switchTab({
						url: "/pages/checkIn/checkIn"
					})
				}
			}
			uni.preLogin({
				provider: 'univerify',
				success() { //预登录成功
					// 显示一键登录选项
					that.cantUse = false	//正确值false
					that.isNotReady = false
				},
				fail(res) { // 预登录失败
					// 不显示一键登录选项（或置灰）
					// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
					console.log(res)
					that.cantUse = true	//正确值true
					that.isNotReady = false
				}
			})

		},
		methods: {
			// 按下按钮时触发
			handleTouchStart() {
				this.isPressed = true;
			},
			// 松开按钮时触发
			handleTouchEnd() {
				this.isPressed = false;
			},
			handleNewTouchStart() {
				this.isNewPressed = true;
			},
			// 松开按钮时触发
			handleNewTouchEnd() {
				this.isNewPressed = false;
			},
			async login() {
				this.isLoading = true
				let phoneNum = await login()
				console.log(phoneNum)
				if (phoneNum == null) {
					this.isLoading = false
					return
				}
				this.data.phone = phoneNum //phoneNum
				let user = await getOne(this.data)
				user = user.data
				console.log(user);
				this.isLoading = false
				// 后端查phone是否存在，并把其id和name放入storage中
				if (user != null) {
					uni.setStorageSync("id",user.sid)
					uni.setStorageSync("name",user.name)
					uni.setStorageSync("sex",user.sex)
					uni.setStorageSync("dept",user.dept)
					uni.setStorageSync("dorid",user.dorid)
					uni.setStorageSync("phoneNum",phoneNum)
					uni.setStorageSync("email",user.email)
					uni.switchTab({
						url: '/pages/checkIn/checkIn'
					})
				} else {
					uni.showToast({
						title: '登录失败',
						icon: 'none',
					});
				}
			},
			newLogin() {
				uni.navigateTo({
					url: "/pages/newLogin/newLogin"
				})
			},
			test() {
				uni.switchTab({
					url: '/pages/checkIn/checkIn'
				})
			}
		},
	};
</script>

<style scoped>
	.login-page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #ffffff;
	}

	.container {
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		justify-content: center;
		align-items: center;
		/* 水平居中 */
		margin-bottom: 40px;
		text-align: center;
		/* 文字居中 */
	}

	.logo {
		width: 100px;
		height: 100px;
		border-radius: 20px;
	}

	.app-name {
		margin-top: 10px;
		/* 文字与 Logo 的间距 */
		font-size: 18px;
		/* 文字大小 */
		background: #0e70f0;
		/*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
		-webkit-background-clip: text;
		/*将设置的背景颜色限制在文字中*/
		-webkit-text-fill-color: transparent;
		/*给文字设置成透明*/
	}

	.button-container {
		width: 80%;
		position: relative;
		/* 设置为相对定位，方便账号绑定按钮定位 */
	}

	.wechat-login-btn {
		width: 100%;
		background-color: #07c160;
		color: #ffffff;
		font-size: 16px;
		border-radius: 5px;
		margin-bottom: 10px;
		/* 与账号绑定按钮的间距 */
		transition: background-color 0.1s ease;
		/* 添加过渡效果 */
	}

	.wechat-login-btn-active {
		background-color: #059c4a;
		/* 按下时的深绿色 */
	}

	.wechat-newLogin-btn {
		width: 100%;
		background-color: #ffffff;
		color: #000000;
		font-size: 16px;
		border-radius: 5px;
		margin-bottom: 10px;
		/* 与账号绑定按钮的间距 */
		transition: background-color 0.1s ease;
		/* 添加过渡效果 */
	}

	.wechat-newLogin-btn-active {
		background-color: #c4c4c4;
		/* 按下时的灰色 */
	}
</style>